<template>
  <div class="footer">
    <!--v-if="hash!='/contactUs'"-->
      <div class="contact text-center">
        <div class="middle"><a @click="goContactPage">联系我们</a></div>
      </div>
      <div class="bottom hidden-xs-only" >
        <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="6" class="sports solution-box" >
          <h3>关于公司</h3>
          <p class="padpad" @click="chanpinClick">产品中心</p>
          <p class="padpad" @click="aboutClick">关于我们</p>
        </el-col>
        <el-col :span="6" class="sports solution-box" >
          <h3>服务支持</h3>
          <p class="padpad" @click="calendarClick">日历</p>
          <p class="padpad" @click="weatherClick">天气预报</p>
        </el-col>
        <el-col :span="6" class="sports solution-box" >
          <h3>新闻活动</h3>
          <p class="padpad" @click="hezuoClick">合作案例</p>
          <p class="padpad" @click="newsClick">公司新闻</p>
        </el-col>
        <el-col :span="6" class="sports solution-box" >
          <h3>关注我们</h3>
          <p class="padpad" @click="zhongzzClick">公司公众号</p>
          <p class="padpad" @click="aboutClick">公司官网</p>
        </el-col>
      </el-row>
      </div>
      <div class="bottom hidden-sm-and-up" >
        <el-row  class="row-bg" >
        <el-col :span="12" class="sports solution-box" >
          <el-card class="box-card" shadow="always">
          <h3>关于公司</h3>
          <p class="padpad" @click="chanpinClick">产品中心</p>
          <p class="padpad" @click="aboutClick">关于我们</p>
          </el-card>
        </el-col>
        <el-col :span="12" class="sports solution-box" >
          <el-card class="box-card" shadow="always">
          <h3>服务支持</h3>
          <p class="padpad" @click="calendarClick">日历</p>
          <p class="padpad" @click="weatherClick">天气预报</p>
          </el-card>
        </el-col>
        <el-col :span="12" class="sports solution-box" >
          <el-card class="box-card" shadow="always">
          <h3>新闻活动</h3>
          <p class="padpad" @click="hezuoClick">合作案例</p>
          <p class="padpad" @click="newsClick">公司新闻</p>
          </el-card>
        </el-col>
        <el-col :span="12" class="sports solution-box" >
          <el-card class="box-card">
          <h3>关注我们</h3>
          <p class="padpad" @click="zhongzzClick">公司公众号</p>
          <p class="padpad" @click="aboutClick">公司官网</p>
          </el-card>
        </el-col>
      </el-row>
      </div>
  </div>
</template>

<script>
export default{
  name: 'Footer',
  props:{
    hash:String
  },
  data() {
    return {
      isShow: true
    }
  },
  methods: {
    zhongzzClick(){
      this.$router.push({path:'/zhongzz'});
    },
    weatherClick(){
      this.$router.push({path:'/weather'});
    },
    calendarClick(){
      this.$router.push({path:'/calendar'});
    },
    newsClick(){
      this.$router.push({path:'/hangyeMove'});
    },
    aboutClick(){
      this.$router.push({path:'/'});
    },
    hezuoClick(){
      this.$router.push({path:'/gnDemo'});
    },
    chanpinClick(){
      this.$router.push({path:'/qingsuan'});
    },
    goContactPage(){
      this.$router.push({path:'/contactUs'});
      window.scrollTo(0,0);
    }
  }
}
</script>

<style lang="less">
.padpad{
  margin-top: 8px;
}
  .footer{
    background-color: #FFFFFF;
    width: 100%;
    margin-top: -202px;
    box-sizing: border-box;
    height: 202px;
    .middle{
      width: 100%;
      margin: 0 auto;
    }
  }
  .contact{
    width: 100%;
    // background: linear-gradient(to right,#0ab8f0,#44d9e2,#7ffed8);
    background: #1965ab;
    height: 100px;
    line-height: 100px;
    a{
      display:inline-block;
      padding:0 100px;
      height: 50px;
      line-height: 50px;
      border-radius: 50px;
      text-align: center;
      font-size: 22px;
      color: #FFFFFF;
      background: rgba(255,255,255,0.2);
      text-decoration: none;
    }
    a:hover{
      background: rgba(245,245,245,0.5);
    }
  }
  .bottom{
    background: #f7fbfd;
    text-align: center;
    color: #ababab;
    // height: 72px;
    padding: 32px 0;
  }
</style>
